<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>积分平台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="__INDEX__/mui/css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/shoppingInfo.css"/>
		<script src="__INDEX__/js/lib/font.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body >
	    <header class="mui-bar mui-bar-nav">
	        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="{:url('index/shopping')}"></a>
	        <h1 class="mui-title">商品详情</h1>
	        <span class="mui-pull-right del" dataid="{$data['id']}">删除</span>
	    </header>
	    <div class="mui-content">
	    	<div class="imgInfo">
	    		<img src="{:getImg($data['picture'])}"/>
	    	</div>
	    	<div class="contInfo">
	    		<h3>{$data['product_name']}</h3>
    			<div class="jifen"><span>{$data['required_integral']}</span>积分</div>
    			<p>市场参考价：{$data['market_value']}元</p>
	    	</div>
	    	<div class="goumai">
	    		<p>购买数量：</p>
	    		<div class="number">
	    			<div class="jian">
	    				<span></span>
	    			</div>
	    			<div class="suliang">1</div>
	    			<div class="jia">
	    				<span></span>
	    				<span></span>
	    			</div>
	    		</div>
	    		<div class="ensure">
	    			<div class="mui-pull-left danjia">
	    				<span class="danjia-title">总价：</span>
	    				<span class="danjia-number">{$data['required_integral']}</span>积分
	    			</div>
	    			<div class="mui-pull-right btn">
	    				确认兑换
	    			</div>
	    		</div>
	    	</div>
	    </div>
		<script src="__INDEX__/js/lib/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/mui/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/mui/js/mui.view.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/layer_mobile/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/js/lib/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/js/shoppingInfo.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/js/jquery.3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__INDEX__/js/maowenke.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(".jia").on('tap',function () {
			var $num = parseInt($(".suliang").text());
			$num++;
			$(".suliang").text($num);
			if($num>1){
			    $('.jian span').css('background','#368DEF');
			}
			var $jiage = parseInt("{$data['required_integral']}");
			$jiage = $num*$jiage;
			$(".danjia-number").text($jiage);
        });
		$(".jian").on('tap',function () {
            var $num = parseInt($(".suliang").text());
            if($num>1){
                $num--;
			}
            $(".suliang").text($num);
            if($num==1){
                $('.jian span').css('background','#DDDDDD');
			}
            var $jiage = parseInt("{$data['required_integral']}");
            $jiage = $num*$jiage;
            $(".danjia-number").text($jiage);
        });
		$(".btn").on('tap',function () {
			var $id = "{$data['id']}";
			var $num = parseInt($(".suliang").text());
			$.post("{:url('api/products_order')}",{id:$id,num:$num},function (data) {
				mui.alert(data.msg);
            });
        })
	</script>
	</body>
</html>
